<template>
  <div class="AppHeader" :class="{header:isactive, headerb: !isactive}" key="2">
    <div class="fle">
      <span class="ag" v-if="rank">{{title}}</span>
      <span class="agq" v-if="!rank" @click="back">
        <span>&#9668;返回</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppHeader",
  props: {
    title: String
  },
  data() {
    return {
      rank: true,
      isactive: true,
      
    };
  },
  watch: {
    $route(route) {
      route.name == "Rank" || route.name == "Detail" || route.name == "Play" || route.name == "Play2"
       ? this.$store.commit("rankName", false)
        : this.$store.commit("rankName", true);
      route.name == "Home"
        ? this.$store.commit("headerName", true)
        : this.$store.commit("headerName", false);
      sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      this.rank = this.$store.state.rankDate;
      this.isactive = this.$store.state.headerDate;
      console.log(this.isactive);
    }
  },
  components: {},
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
         this.isactive=this.$store.state.headerDate;
         this.rank=this.$store.state.rankDate;
         console.log(this.isactive);
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        console.log(this.isactive);
    })
  },
  mounted() {},
 
  methods: {
   
    
    back() {
      history.go(-1);
      this.rank=false
    }
  }
};
</script>

<style lang='scss' scoped>
.headerb {
  background: linear-gradient(to top, #161616, rgb(77, 18, 7));
  height: 64px !important;
}
.fle {
  height: 64px;

  position: relative;

  .ag {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;

    font-size: 19px;
    letter-spacing: 2px;
  }
  .agq {
    position: absolute;
    top: 50%;
    // padding-top: 12px;
    box-sizing: border-box;
    transform: translateY(-50%);
    left: 10px;
    border-bottom: 2px solid white;
    border-radius: 3px;
    font-size: 19px;
    letter-spacing: 2px;
  }
}
.header {
  width: 100%;
  position: absolute;
  z-index: 10;
  top: 0;
  height: 64px;
  color: rgba($color: #303030, $alpha: 0);
  // background: rgba($color: #303030, $alpha: 0.1) ;
}
</style>
